<template>
  <div>
    <VueWaterfallPluginNext :list="list" :gutter="0">
      <template #item="{ item }">
        <div class="card" @click="handleClickCard(item)">
          <img :src="item" />
          <p class="text">
            <el-avatar
              :size="24"
              src="https://heikaimu.github.io/images/1.jpeg"
            ></el-avatar>
            文章标题
          </p>
        </div>
      </template>
    </VueWaterfallPluginNext>
    <div class="bot-bar">
      <button>时间正序</button><button>时间倒序</button><button>最多点击</button
      ><button>最少点击</button><button>总榜单</button><button>最多评论</button>
    </div>
  </div>
</template>

<script>
import VueWaterfallPluginNext from "vue-waterfall-plugin-next";
import "vue-waterfall-plugin-next/dist/style.css";

export default {
  components: { VueWaterfallPluginNext },
  data() {
    return {
      list: [
        "https://heikaimu.github.io/images/1.jpeg",
        "https://heikaimu.github.io/images/2.jpeg",
        "https://heikaimu.github.io/images/3.jpeg",
        "https://heikaimu.github.io/images/1.jpeg",
        "https://heikaimu.github.io/images/2.jpeg",
        "https://heikaimu.github.io/images/3.jpeg",
        "https://heikaimu.github.io/images/1.jpeg",
        "https://heikaimu.github.io/images/2.jpeg",
        "https://heikaimu.github.io/images/3.jpeg",
      ],
    };
  },
  computed: {
    itemWidth() {
      return 138 * 0.5 * (document.documentElement.clientWidth / 375); // #rem布局 计算宽度
    },
    gutterWidth() {
      return 9 * 0.5 * (document.documentElement.clientWidth / 375); //#rem布局 计算x轴方向margin(y轴方向的margin自定义在css中即可)
    },
  },
  //下边的内容没有用到，需要的小伙伴可以看文档了解，如果需求后续回更新
  methods: {
    scroll(scrollData) {
      console.log(scrollData);
    },
    switchCol(col) {
      this.col = col;
      console.log(this.col);
    },
    loadmore(index) {
      this.data = this.data.concat(this.data);
    },
    handleClickCard() {},
  },
};
</script>

<style scoped>
.card {
  background-color: #ffffff;
  position: relative;
}
.card img {
  display: block;
  width: 100%;
}
.card .text {
  padding: 10px;
  text-align: center;
  font-size: 14px;
  color: #ffffff;
  position: absolute;
  bottom: 0;
}
.waterfall__list {
  height: 100vh;
}
.bot-bar {
  position: fixed;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
}
.bot-bar button {
  padding: 8px 12px;
  background-color: rgb(65, 62, 62);
  color: #fff;
  border: unset;
}
button:focus{
    color: rgb(226, 103, 66)
}
</style>
